<template>

    <el-dialog :width="width" :visible.sync="visible" :title="dialogTitle"  :before-close="handleClose"    v-bind="$attrs" >
      <slot></slot>
      <template slot="footer">
         <slot name="btn"></slot>
         <el-button key="back" v-if="hasCancelButton" @click="handleClose">
          取消
        </el-button>
        <el-button key="submit" v-if="hasOkButton" type="primary"  @click="handleOk">
          确定
        </el-button>
      </template>
    </el-dialog>
</template>
<script>
export default {
  props: {
    // 控制显示
    visible: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    dialogTitle: {
      type: String,
      default: '新增'
    },
    // 取消按钮
    hasCancelButton: {
      type: Boolean,
      default: true
    },
    // 确认按钮
    hasOkButton: {
      type: Boolean,
      default: true
    },
    //宽度
    width:{
      type:String,
      default:'40%'
    }
  },
  data() {
    return {
      show: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleOk() {
      this.handleClose()
      this.$emit('handleOk')
    }
  }
}
</script>
